// src/pages/inspection/ItemCategoryManage.vue
<template>
	<div class="item-category-manage">
		<el-row :gutter="20">
			<el-col :span="8">
				<el-card>
					<template #header>
						<div class="header-bar">
							<span>检测项目分类</span>
							<el-button type="primary" size="small"
								@click="addCategoryDialogVisible = true">新增分类</el-button>
						</div>
					</template>
					<el-tree :data="categoryTree" node-key="id" :default-expand-all="true" :expand-on-click-node="false"
						highlight-current @node-click="selectCategory"
						:props="{ label: 'name', children: 'children' }" />
				</el-card>
			</el-col>

			<el-col :span="16">
				<el-card>
					<template #header>
						<div class="header-bar">
							<span>检测项列表 - {{ selectedCategory?.name || '未选择' }}</span>
							<el-button type="primary" size="small" @click="openDialog('add')"
								:disabled="!selectedCategory">新增检测项</el-button>
						</div>
					</template>

					<el-table :data="itemList" border stripe>
						<el-table-column prop="name" label="检测项名称" />
						<el-table-column prop="method" label="检测方法" />
						<el-table-column prop="range" label="标准值范围" />
						<el-table-column label="操作" width="180">
							<template #default="scope">
								<el-button size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
								<el-button size="small" type="danger" @click="deleteItem(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>

		<el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="名称">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="检测方法">
					<el-input v-model="form.method" />
				</el-form-item>
				<el-form-item label="标准范围">
					<el-input v-model="form.range" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>

		<el-dialog title="新增分类" v-model="addCategoryDialogVisible" width="400px">
			<el-form :model="newCategoryForm" label-width="100px">
				<el-form-item label="分类名称">
					<el-input v-model="newCategoryForm.name" />
				</el-form-item>
				<el-form-item label="父级分类">
					<el-select v-model="newCategoryForm.parentId" placeholder="选择上级分类">
						<el-option v-for="node in flatParentCategories" :key="node.id" :label="node.name"
							:value="node.id" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="addCategoryDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="confirmAddCategory">添加</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
	setup() {
		const categoryTree = ref([
			{
				id: 1,
				name: '结构性能',
				children: [
					{
						id: 11,
						name: '力学强度',
						children: [],
						items: [
							{ name: '力学强度测试项1', method: '化学分析', range: '等级 78' },
							{ name: '力学强度测试项2', method: '老化试验', range: '≤76 dB' },
							{ name: '力学强度测试项3', method: '声学检测', range: '等级 82' },
							{ name: '力学强度测试项4', method: '声学检测', range: '≤58 dB' },
							{ name: '力学强度测试项5', method: '热学检测', range: '≤70 mg/m²' }
						]
					},
					{
						id: 12,
						name: '耐久性',
						children: [],
						items: [
							{ name: '耐久性测试项1', method: '声学检测', range: '≤49 dB' },
							{ name: '耐久性测试项2', method: '老化试验', range: '≥54 MPa' },
							{ name: '耐久性测试项3', method: '标准测试', range: '3~8 W/(m·K)' },
							{ name: '耐久性测试项4', method: '声学检测', range: '等级 81' },
							{ name: '耐久性测试项5', method: '化学分析', range: '≤24 dB' }
						]
					}
				]
			},
			{
				id: 2,
				name: '化学性能',
				children: [
					{
						id: 21,
						name: '腐蚀性分析',
						children: [],
						items: [
							{ name: '腐蚀性分析测试项1', method: '声学检测', range: '等级 41' },
							{ name: '腐蚀性分析测试项2', method: '老化试验', range: '≤18 mg/m²' },
							{ name: '腐蚀性分析测试项3', method: '老化试验', range: '≤95 mg/m²' },
							{ name: '腐蚀性分析测试项4', method: '物理检测', range: '≥79 MPa' },
							{ name: '腐蚀性分析测试项5', method: '声学检测', range: '≤85 dB' }
						]
					}
				]
			},
			{
				id: 3,
				name: '热学性能',
				children: [
					{
						id: 31,
						name: '导热系数',
						children: [],
						items: [
							{ name: '导热系数测试项1', method: '声学检测', range: '等级 18' },
							{ name: '导热系数测试项2', method: '标准测试', range: '≤74 dB' },
							{ name: '导热系数测试项3', method: '化学分析', range: '等级 79' },
							{ name: '导热系数测试项4', method: '化学分析', range: '≤68 dB' },
							{ name: '导热系数测试项5', method: '热学检测', range: '≥64 MPa' }
						]
					}
				]
			},
			{
				id: 4,
				name: '声学性能',
				children: [
					{
						id: 41,
						name: '隔音性能',
						children: [],
						items: [
							{ name: '隔音性能测试项1', method: '标准测试', range: '等级 19' },
							{ name: '隔音性能测试项2', method: '声学检测', range: '3~8 次循环' },
							{ name: '隔音性能测试项3', method: '声学检测', range: '≤59 mg/m²' },
							{ name: '隔音性能测试项4', method: '声学检测', range: '≥22 MPa' },
							{ name: '隔音性能测试项5', method: '老化试验', range: '1~2 W/(m·K)' }
						]
					}
				]
			},
			{
				id: 5,
				name: '防火性能',
				children: [
					{
						id: 51,
						name: '燃烧等级',
						children: [],
						items: [
							{ name: '燃烧等级测试项1', method: '老化试验', range: '1~4 W/(m·K)' },
							{ name: '燃烧等级测试项2', method: '化学分析', range: '2~4 W/(m·K)' },
							{ name: '燃烧等级测试项3', method: '声学检测', range: '≤68 dB' },
							{ name: '燃烧等级测试项4', method: '物理检测', range: '4~8 次循环' },
							{ name: '燃烧等级测试项5', method: '声学检测', range: '≤67 mg/m²' }
						]
					}
				]
			},
			{
				id: 6,
				name: '环境适应性',
				children: [
					{
						id: 61,
						name: '抗冻性能',
						children: [],
						items: [
							{ name: '抗冻性能测试项1', method: '标准测试', range: '3~6 次循环' },
							{ name: '抗冻性能测试项2', method: '化学分析', range: '≤40 mg/m²' },
							{ name: '抗冻性能测试项3', method: '热学检测', range: '5~7 次循环' },
							{ name: '抗冻性能测试项4', method: '化学分析', range: '1~3 次循环' },
							{ name: '抗冻性能测试项5', method: '标准测试', range: '≥47 MPa' }
						]
					}
				]
			},
			{
				id: 7,
				name: '表面特性',
				children: [
					{
						id: 71,
						name: '耐磨性',
						children: [],
						items: [
							{ name: '耐磨性测试项1', method: '物理检测', range: '等级 37' },
							{ name: '耐磨性测试项2', method: '化学分析', range: '1~5 次循环' },
							{ name: '耐磨性测试项3', method: '声学检测', range: '≤26 dB' },
							{ name: '耐磨性测试项4', method: '物理检测', range: '≥10 MPa' },
							{ name: '耐磨性测试项5', method: '化学分析', range: '≤99 mg/m²' }
						]
					}
				]
			}
		])
		const itemList = ref([])
		const selectedCategory = ref(null)
		const dialogVisible = ref(false)
		const dialogTitle = ref('')
		const form = ref({})
		const currentIndex = ref(-1)

		const addCategoryDialogVisible = ref(false)
		const newCategoryForm = ref({ name: '', parentId: null })

		const flatParentCategories = computed(() => {
			const list = []
			categoryTree.value.forEach(cat => {
				list.push({ id: cat.id, name: cat.name })
				cat.children?.forEach(child => {
					list.push({ id: child.id, name: `└ ${child.name}` })
				})
			})
			return list
		})

		const selectCategory = (node) => {
			selectedCategory.value = node
			itemList.value = node.items || []
		}

		const openDialog = (type, row) => {
			dialogTitle.value = type === 'add' ? '新增检测项' : '编辑检测项'
			dialogVisible.value = true
			if (type === 'edit') {
				form.value = { ...row }
				currentIndex.value = itemList.value.findIndex(i => i.name === row.name)
			} else {
				form.value = { name: '', method: '', range: '' }
				currentIndex.value = -1
			}
		}

		const submitForm = () => {
			if (!selectedCategory.value) return
			if (currentIndex.value >= 0) {
				itemList.value[currentIndex.value] = { ...form.value }
			} else {
				itemList.value.push({ ...form.value })
			}
			selectedCategory.value.items = itemList.value
			dialogVisible.value = false
		}

		const deleteItem = (row) => {
			itemList.value = itemList.value.filter(i => i.name !== row.name)
			if (selectedCategory.value) {
				selectedCategory.value.items = itemList.value
			}
		}

		const confirmAddCategory = () => {
			const { parentId, name } = newCategoryForm.value
			const newId = Date.now()
			const newNode = { id: newId, name, children: [], items: [] }

			for (const parent of categoryTree.value) {
				if (parent.id === parentId) {
					parent.children.push(newNode)
					break
				}
				for (const child of parent.children || []) {
					if (child.id === parentId) {
						child.children = child.children || []
						child.children.push(newNode)
						break
					}
				}
			}
			addCategoryDialogVisible.value = false
			newCategoryForm.value = { name: '', parentId: null }
		}

		return {
			categoryTree,
			itemList,
			selectedCategory,
			dialogVisible,
			dialogTitle,
			form,
			openDialog,
			submitForm,
			deleteItem,
			addCategoryDialogVisible,
			newCategoryForm,
			confirmAddCategory,
			flatParentCategories,
			selectCategory
		}
	}
}
</script>

<style scoped>
.item-category-manage {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}
</style>
